<script setup lang="ts">
	import { reactive, ref, unref } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	// import { paymentList } from '@/package_tools/api/Home'

	const show = ref(false)

	interface RouteParams {
		store_id : string
		name : string,
		receive_money : string
		balance : string
		should_payment : string
	}
	const routeParams = ref<RouteParams>({
		store_id: '',
		name: '',
		receive_money: '',
		balance: '',
		should_payment: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		getDetail()
	})

	const towIndex = ref(1)
	const useTabs = () => {
		const tabsColumns = reactive([
			{
				name: '待结算',
				id: 1
			},
			{
				name: '已结算',
				id: 2
			}
		])

		return {
			tabsColumns
		}
	}
	const { tabsColumns } = useTabs()
	const click = (index) => {
		towIndex.value = index.id
		getDetail()
	}

	const useGetDetail = () => {

		const detailInfo = ref({})

		const getDetail = async () => {
			const params = {
				store_id: unref(routeParams).store_id,
				pay_status: towIndex.value
			}
			const res = await paymentList(params)
			detailInfo.value = res.data.list
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()

	const detailList = ref([])

	const showClick = (detail) => {
		detailList.value = detail
		show.value = true;
	}

	const close = () => {
		show.value = false;
	}
</script>

<template>
	<view class="content">
		<view>
			<view class="main-mixn">
				<view class="mixn-name">{{routeParams.name}}</view>
				<view class="mixn-line"></view>
				<view class="mixn-foot">
					<view class="foot-box">
						<view class="foot-name">预存金额</view>
						<view class="foot-text">{{routeParams.balance}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">欠款金额</view>
						<view class="foot-text">{{routeParams.receive_money}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">账期欠款</view>
						<view class="foot-text">{{routeParams.should_payment}}</view>
					</view>
					<view class="foot-box">
						<view class="foot-name">应收金额</view>
						<view class="foot-text">{{routeParams.receive_money}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="mian-header">
				<view class="user_info_wrap">
					<view class="user-info">
						<view class="avatar-wrap">
							<up-tabs :list="tabsColumns" :activeStyle="{ color: 'rgba(54, 116, 242, 1)' }"
								:itemStyle="{ height: '104rpx', fontSize: '28rpx' }" lineWidth="104rpx"
								lineColor=" rgba(54, 116, 242, 1)" @click="click">
							</up-tabs>
						</view>
					</view>
				</view>
			</view>
			<view class="main-thbox">
				<view class="main-user" v-for="(item,index) in detailInfo" :key="index">
					<view class="main-header">
						<view class="mian-address">
							<view class="address-name">{{item.create_time}}</view>
						</view>
						<view class="mian-address1" @click="showClick(item.detail)">
							订单明细
						</view>
					</view>
					<view>
						<view class="line"></view>
						<view class="main-jl">订单总额：<text style="color: rgba(2, 14, 36, 1);">{{item.money}}</text>
						</view>
						<view class="main-jl">订单数量：<text style="color: rgba(2, 14, 36, 1);">{{item.order_num}}</text>
						</view>
						<view class="main-jl">经销商：<text style="color: rgba(2, 14, 36, 1);">{{item.dealer.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<up-popup :show="show" :round="10" mode="center" @close="close" @open="open">
		<view class="popupBox">
			<view v-for="(res,ind) in detailList" :key="ind" class="box-header">
				<view class="header-name">订单号：{{res.companyOrder?.order_no}}</view>
				<view class="header-text">￥{{res.money}}</view>
			</view>
		</view>
	</up-popup>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.main-mixn {
		width: 702rpx;
		height: 266rpx;
		border-radius: 12rpx;
		background: rgba(54, 116, 242, 1);
		margin-left: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;

		.mixn-name {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(241, 245, 249, 1);
		}

		.mixn-line {
			width: 658rpx;
			height: 2rpx;
			background: rgba(255, 255, 255, 0.1);
			margin: 20rpx 0rpx;
		}

		.mixn-foot {
			display: flex;
			justify-content: space-between;

			.foot-box {
				.foot-name {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}

				.foot-text {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(255, 255, 255, 1);
					margin-top: 10rpx;
				}
			}
		}
	}

	.main {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 40rpx;

		.mian-header {
			.user_info_wrap {
				@include flex();
				flex-direction: column;
				justify-content: flex-end;
				gap: 20rpx;
				width: 100%;
				height: 109rpx;
				background-color: #FFFFFF;
			}

		}

		.main-thbox {
			height: 65vh;
			overflow-y: scroll;
			background-color: #FFFFFF;


			.main-user {
				width: 702rpx;
				// height: 50vh;
				border-radius: 12rpx;
				background: rgba(242, 243, 245, 1);
				padding: 30rpx;
				box-sizing: border-box;
				margin: 20rpx auto;

				.main-header {
					display: flex;
					justify-content: space-between;

					.mian-address {

						.address-name {
							font-size: 28rpx;
							font-weight: 700;
							color: rgba(35, 35, 36, 1);
						}

						.distance-name {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba(55, 131, 252, 1);
							margin-top: 10rpx;
						}
					}

					.mian-address1 {
						width: 180rpx;
						height: 72rpx;
						border-radius: 1766rpx;
						background: rgba(55, 131, 252, 1);
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						line-height: 72rpx;
					}
				}



				.line {
					width: 650rpx;
					height: 2rpx;
					margin: 20rpx 0rpx;
					background: rgba(0, 0, 0, 0.1);
				}

				.main-jl {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(101, 103, 105, 1);
					margin-bottom: 20rpx;
				}

			}
		}
	}

	.popupBox {
		width: 100%;
		max-height: 500rpx;
		overflow-y: scroll;
		padding: 30rpx;
		box-sizing: border-box;

		.box-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.header-name {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(2, 14, 36, 1);
			}

			.header-text {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(245, 99, 81, 1);
			}
		}
	}
</style>